<template>
  <div class="box">
    <div class="box2" v-if="!isSelct">
      <div class="scancode" title="点击扫码" @click="sconCode">
        <img
          :src="require('../../../assets/scanCode.png')"
          alt=""
          style="width: 100px; height: 100px"
        />
      </div>
      <div class="title">请扫描出库单条码或物品色环码</div>
      <div>
        <el-button plain class="btnP" @click="selectC"
          >手动选择出库单</el-button
        >
      </div>
    </div>
    <div v-if="isSelct" class="con">
      <div class="content">
        <div class="title">选择出库单</div>
        <div style="margin-top: 20px">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="借用单号:">
              <el-input
                placeholder="请输入借用单号"
                v-model="formInline.orderCode"
              ></el-input>
            </el-form-item>
            <el-form-item label="借用人:">
              <el-input
                placeholder="请输入借用人"
                v-model="formInline.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="班组:">
              <el-input
                placeholder="请输入班组"
                v-model="formInline.teamGroupName"
              ></el-input>
            </el-form-item>
            <el-form-item label="工程名称:">
              <el-input
                placeholder="请输入工程名称"
                v-model="formInline.projectName"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="selectData"
                class="btns"
                :loading="loading"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            v-loading="loading"
            height="100%"
            border
            :header-cell-style="{
              'text-align': 'center',
              color: '#009191',
              'font-size': '18px',
            }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="orderCode" label="借用单号" align="center">
            </el-table-column>
            <el-table-column prop="projectCode" label="工程编号" align="center">
            </el-table-column>
            <el-table-column prop="projectName" label="工程名称" align="center">
            </el-table-column>
            <el-table-column prop="lendTime" label="出库日期" align="center">
            </el-table-column>
            <!-- <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  type="primary"
                  @click="goDetail(scope.row)"
                  style="color: #009191; font-size: 16px; font-weight: bold"
                  >查看</el-link
                >
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="bottom">
          <div class="sure">
            <el-button type="primary" class="btns" @click="submit"
              >确认</el-button
            >
          </div>
          <div style="margin-left: auto">
            <el-button plain class="btns2" @click="backCode"
              >返回扫码</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { borrowRecord, getBorrowRecordByCode } from "@/common/api";
export default {
  name: "SelectDj",
  props: {},
  components: {},
  data() {
    return {
      isSelct: false,
      formInline: {
        orderCode: "",
        teamGroupName: "",
        projectName: "",
        username: "",
      },
      loading: false,
      tableData: [],
      currentRow: null,
      multipleSelection: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.borrowRecord();
  },
  methods: {
    borrowRecord() {
      let param = {
        pageNum: 1,
        pageSize: 300,
        status: 0,
        ...this.formInline,
        orderFlag: 0,
      };
      this.loading = true;
      borrowRecord(param).then((res) => {
        this.loading = false;
        if (res.success) {
          this.tableData = res.data.records;
        }
      });
    },
    selectC() {
      this.isSelct = true;
      this.currentRow = null;
    },

    backCode() {
      this.isSelct = false;
      this.multipleSelection = [];
    },
    selectData() {
      this.borrowRecord();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      getBorrowRecordByCode({ orderCode: val.orderCode }).then((res) => {});
    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    submit() {
      if (!this.multipleSelection.length) {
        this.$warnMsg("请至少选择一个出库单!");
        return;
      }
      getBorrowRecordByCode({
        orderCodes: this.multipleSelection.map((i) => i.orderCode).join(","),
      }).then((res) => {
        if (res.success) {
          this.$emit("goStep", 1);
        }
      });
    },
    goDetail(item) {},
    sconCode() {
      // this.currentRow = null;
      this.multipleSelection = [];
    },
  },
};
</script>


<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .box2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    .scancode {
      cursor: pointer;
    }
    .title {
      font-size: 28px;
      color: #009191;
      font-weight: bold;
    }
  }
  .con {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .content {
      width: 80%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
        /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
          rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      .title {
        color: #009191;
        font-weight: bold;
        font-size: 20px;
      }
      .table {
        margin-top: 20px;
        overflow: hidden;
        flex: 1;
      }
      .bottom {
        margin-top: 20px;
        display: flex;
        align-items: center;
        position: relative;
        .sure {
          position: absolute;
          left: calc(50% - 40px);
        }
      }
    }
  }
}
.btnP {
  color: #009191;
  border-color: #009191;
  font-size: 24px;
}
.btnP:hover {
  color: #009191; /* 悬停文字颜色 */
  border-color: #009191; /* 悬停边框颜色 */
  background-color: transparent; /* 保持背景透明 */
}
.btns {
  color: white;
  background-color: #249087;
}
.btns2 {
  color: #009191;
  border-color: #009191;
}
.btns2:hover {
  color: #009191; /* 悬停文字颜色 */
  border-color: #009191; /* 悬停边框颜色 */
  background-color: transparent; /* 保持背景透明 */
}

// .btns:hover {
//   // color: white;
//   // background-color: #249087;
// }
</style>
